import React, { useEffect, useState, useCallback } from 'react'
import { View, Image, Input, Text } from '@tarojs/components'
import './selectCity.scss'
// import NewNavbar from '../../redux/withRedux'
import Navbar from '../../components/navbar/navbar'
import LETTERLIST from './letter'
import SEARCHICON from '../../images/search.png'
import { useSelector } from 'react-redux'

const SearchItem = ({ ret, name }) => {
  const clickItem = useCallback(
    (e, item) => {
      console.log(e, item)
    },
    [],
  )
  return <View className="search-item">
    <View className="title">{name}</View>
    <View className="content">
      {ret.length > 0 ? ret.map(item =>
        <View className={`city-name ${(item.name == '北京2' || item.name == '南昌9') ? 'city-name_on' : ''}`} onClick={(e) => clickItem(e, item)}>
          {item.name}
        </View>
      ) : null}
    </View>
  </View>
}

const LetterIndex = (letteritem) => {
  if (!letteritem) return null

  return <View className="letter-item">
    <View className="letter-title">{letteritem.title}</View>
    {letteritem.ret.map(item =>
      <View className="letter-index">{item.name}</View>
    )}
  </View>
}

const FixedItem = ({ value }) => {
  // console.log(value, 'valye');
  return <View className="fixed-item">
    {value}
  </View>
}

const selectCity = () => {
  const [keyword, setKeyword] = useState('')
  const [historyList, setHistoryList] = useState(undefined)
  const [cityList, setCityList] = useState(undefined)
  const [lettersCity, setLettersCity] = useState(undefined)
  const [letters, setLetters] = useState([])


  const inputChange = (e) => {
    setKeyword(e.detail.value)
  }

  useEffect(() => {
    setHistoryList({
      name: '定位/历史搜索',
      ret: [
        { id: 1, name: '北京1' },
        { id: 2, name: '北京2' },
        { id: 3, name: '北京3' },
        { id: 4, name: '北京4' },
        { id: 5, name: '北京5' },
        { id: 6, name: '北京6' },
        { id: 7, name: '北京7' },
      ]
    })
    setCityList({
      name: '热门城市',
      ret: [
        { id: 8, name: '杭州8' },
        { id: 9, name: '南昌9' },
        { id: 10, name: '深圳10' },
        { id: 11, name: '武汉11' },
        { id: 12, name: '宜春12' },
        { id: 13, name: '南京13' },
        { id: 14, name: '宜昌14' },
      ]
    })
    setLettersCity(LETTERLIST)

    setLetters(['历史', '热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
  }, [])

  const globalData = useSelector(state => state.globalData)

  let styleStr = {
    height: globalData.menuButtonHeight + 2,
    marginTop: globalData.navTop,
    navHeight: globalData.menuButtonHeight + 2 + globalData.navTop + 70
  }

  return <>
    <View className="city-container">
      <Navbar titleText="选择站点" titleAlign="center" isFixed={true} ></Navbar>
      <View className="search-container" style={{ top: `${styleStr.height + styleStr.marginTop}px` }}>
        <View className="search-wapper">
          <Image src={SEARCHICON} className="search-icon" />
          <Input placeholder="请输入(北京/beijing/bj)" placeholderClass="placeHolder" onInput={inputChange} />
        </View>
        <View className="cancel">取消</View>
      </View>
      <View style={{marginTop: styleStr.navHeight}}>
        {historyList ? <SearchItem {...historyList} /> : null}
        {cityList ? <SearchItem {...cityList} /> : null}
        {
          lettersCity ? lettersCity.map(letteritem => <LetterIndex {...letteritem} />) : null
        }
      </View>

    </View>
    <View className="fixed-right">
      {letters.length > 0 ? letters.map(value => <FixedItem value={value} />) : null}
    </View>
  </>
}

export default selectCity